<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统登录</title>
    <link rel="stylesheet" href="../element-ui-2.13.0/lib/theme-chalk/index.css" />
    <script type="text/javascript" src="../vue/vue-v2.6.10.js"></script>
    <script type="text/javascript" src="../element-ui-2.13.0/lib/index.js"></script>
    <script type="text/javascript" src="../vue/axios-0.18.0.js"></script>
    <style type="text/css">
        html {
            overflow-y: scroll;
            vertical-align: baseline;
        }

        body {
            font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial, Verdana, sans-serif;
            font-size: 12px;
            color: #fff;
            height: 100%;
            line-height: 1;
            background: #999
        }

        * {
            margin: 0;
            padding: 0
        }

        ul,
        li {
            list-style: none
        }

        h1 {
            font-size: 30px;
            font-weight: 700;
            text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
            margin-bottom: 15px;
        }

        .login-box {
            width: 410px;
            margin: 120px auto 0 auto;
            text-align: center;
            padding: 40px;
            padding-left: 0px;
            background: url(../img/mask.png);
            border-radius: 10px;
        }

        .login-box .name,
        .login-box .password,
        .login-box .code,
        .login-box .remember {
            font-size: 16px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
        }

        .login-box .remember input {
            box-shadow: none;
            width: 15px;
            height: 15px;
            margin-top: 25px
        }

        .login-box .remember {
            padding-left: 40px
        }

        .login-box .remember label {
            display: inline-block;
            height: 42px;
            width: 70px;
            line-height: 34px;
            text-align: left
        }

        .login-box label {
            display: inline-block;
            width: 100px;
            text-align: right;
            vertical-align: middle
        }

        .login-box #code {
            width: 120px
        }

        .login-box .codeImg {
            float: right;
        }

        .login-box img {
            width: 148px;
            height: 42px;
            border: none
        }


        button {
            cursor: pointer;
            width: 100%;
            height: 44px;
            padding: 0;
            background: #ef4300;
            border: 1px solid #ff730e;
            border-radius: 6px;
            font-weight: 700;
            color: #fff;
            font-size: 24px;
            letter-spacing: 15px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
        }


        button:hover {
            box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2)
        }

        .screenbg {
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: -999;
            overflow: hidden;
            width: 100%;
            height: 100%;
            min-height: 100%;
        }

        .screenbg ul li {
            display: block;
            list-style: none;
            position: fixed;
            overflow: hidden;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1000;
            float: right;
        }

        .screenbg ul a {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: inline-block;
            margin: 0;
            padding: 0;
            cursor: default;
        }

        .screenbg a img {
            display: inline;
            border: none;
            display: block;
            list-style: none;
            position: fixed;
            overflow: hidden;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1000;
            float: right;
        }

        .bottom {
            margin: 8px auto 0 auto;
            width: 100%;
            position: fixed;
            text-align: center;
            bottom: 0;
            left: 0;
            overflow: hidden;
            padding-bottom: 8px;
            color: #ccc;
            word-spacing: 3px;
            zoom: 1;
        }

        .bottom a {
            color: #FFF;
            text-decoration: none;
        }

        .bottom a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="login-box">
            <h1>优学管理系统</h1>
            <div style="color: red;margin-bottom: 10px;"></div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="imageCode" >
                    <el-input v-model="ruleForm.imageCode"  autocomplete="off" style="width: 160px;"></el-input>
                    <div class="codeImg">
                        <img :src="ruleForm.src" @click="changeImg"/>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>

        </div>
        <div class="bottom">©2014 Leting <a href="javascript:;" target="_blank">关于</a> <span>京ICP证030173号</span><img
                width="13" height="16" src="../img/copy_rignt_24.png" /></div>
        <div class="screenbg">
            <ul>
                <li><a href="javascript:;"><img src="../img/01.jpg"></a></li>
            </ul>
        </div>
    </div>
</body>
<script>
    axios.defaults.withCredentials = true
    new Vue({
        el: "#app",
        data: {
            msg:'',
            ruleForm: {
                username: '',
                password: '',
                imageCode: '',
                // 定义变量给其servlet地址发起请求
                src:"http://localhost/code",
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }, {
                        min: 6,
                        max: 30,
                        message: '长度在 6 到 30 个字符'
                    }, {
                        pattern: /^(\w){6,20}$/,
                        message: '只能输入6-20个字母、数字、下划线'
                    }
                ],
                imageCode: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ]

            }

        },
        methods: {
            changeImg(){
                // 验证码当用户点击图片切换验证码图给路径一个最新时间让请求不是同一个
                this.ruleForm.src= "http://localhost/code?t="+new Date();
            },
            submitForm(ruleForm){
                let params = new URLSearchParams;
                // 定义参数 把用户输入的值通过参数传入后台
                params.append("username",this.ruleForm.username);
                params.append("password",this.ruleForm.password);
                params.append("imageCode",this.ruleForm.imageCode);
                // 
                this.$refs[ruleForm].validate((a)=>{
                    if (a) {
                        axios.post("http://localhost:80/user?method=login",params).then(resp=>{
                            // 根据后端返回的数据进行判断是否成功登录，在做超时器跳转到另外页面
                            if (resp.data.code==4) {
                                this.$message({type:'success',message:resp.data.message})
                                // 超时器
                                setTimeout(() => {
                                    window.location.href = 'index.html'
                                }, 2000);
                            }
                             
                        })
                        
                    }else{
                        this.$message({type:'warning',message:'校验未通过'});
                    }
                })
            }

        
        }
    })
</script>

</html>